<template>
    
  <div class="login">
      <!--插入全局背景图片-->
      <img src="~@/assets/注册.png" width="100%" height="100%" alt="">
      <!--<div id="beijing"></div>-->
      <form class="form-box">
          <h3>注册</h3>
          <div class="g">
              <p>用户名</p>
              <label><input type="text" id="username" placeholder="请输入用户名" v-model="username" class="i"></label>
              <p >密码</p>
              <label><input type="password" id="password" placeholder="请输入密码" v-model="password" class="i"></label>
             <div class="f">
              <p></p>
              <input type="checkbox" class="aa" checked="checked" />记住我
              </div>
              <p></p>
                    <a>
                        <!--<router-link to="/zuce"></router-link>-->
                            <button type="button" class="w" @click="login">登录</button>
                           
                           
                        
                    </a>
                    <router-view></router-view>
            </div>
      </form>
  </div>
</template>



<script>
//局部导入axios,但本次使用全局导入
import router from '@/router';
import { ref } from 'vue';

  export default {
    setup() {
        const username = ref('');
        const password = ref('');
        const login = () => {
            console.log('login');
            const usernameVal = username.value;
            const passwordVal = password.value;
            console.log(usernameVal, passwordVal);
            //判断用户名和密码是否为空
            if (usernameVal == '' && passwordVal == null) {
                alert('用户名或密码不能为空');
                return ;
            }
            if (passwordVal.length < 6) {
                alert('密码长度不能小于6位');
                return ;
            }
            alert('注册成功');
            //点击事件进行跳转
            router.push('/zuye');
        };
        return {
            username,
            password,
            login
        };
    }
  }



/*
export default {
    data:function() {
        return {
            username: '',
            password: ''
            
        }
    },
    methods: {
      //登录方法
      login: function() {
        console.log('login');
        var username = this.username;
        var password = this.password;
        console.log(username, password);
        //判断用户名和密码是否为空
        if (username == '' && password == null) {
          alert('用户名或密码不能为空');
          return ;
        }
        if (password.length < 6) {
          alert('密码长度不能小于6位');
          return ;
        }
        alert('注册成功');
        {
          //点击事件进行跳转
          this.$router.push({
          path: '/zuye'
          });
             
        //跳转到首页
       // router.push('/zuye');
        //发送axios请求
        //axios.post('/public/pwd.json', {
         // username: username,
         // password: password
       // }).then(res => {
          //console.log(res);
          //判断用户名是否存在
          /*if (res.data.code == 1) {
            alert('用户名不存在');
            return ;
          }
          //判断密码是否正确
          if (res.data.code == 2) {
            alert('密码错误');
            return ;
          }
          //判断登录成功
          if (res.data.code == 200) {
            alert('登录成功'),
            router.push('/zuye');
          } else {
            alert('登录失败');
          }
        }

      } 
    }
  }*/
   
    
  
      
    

</script>



<style>
/*#beijing{
    width: 100%;
    height: 100%;
    background-image: url('~@/assets/登录2.jpg');
    background-size: cover;

}*/
.form-box{
    padding:40px;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    /*设置背景透明度*/
    opacity: 0.8;
    
    text-align: center;
    border-radius: 10px;
}


.aa{
    text-align: left;
    margin-right: 10px;
}
.w{
    width: 300px;
    height: 30px;
    background-color: #27b3e7;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

p{
    text-align: left;
    font-size: 10px;

}
.f{
    color: rgb(43, 219, 242);
    
    text-align: left;
}
.i{
    width: 300px;
    height: 25px;
    background-color: #ccd5d9;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
</style>
